<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>计算属性与方法的区别</title>
  </head>
  <body>
    <pre>
        计算属性与方法的区别
        1：计算属性基于依赖进行缓存，方法是没有缓存的
        2：计算属性和方法调用方式区别，计算属性不需要括号，但是方法需要（）
        3：计算属性和方法的调用也有区别，方法一般是通过事件调用，计算属性直接当属性值使用
        4：计算属性一般依赖依赖于data中的数据，方法则不依赖
    </pre>
    <div class="box">
      <div>
        {{show()}}
      </div>
      <div>
        {{show()}}
      </div>
      <div>
        {{cshow}}
      </div>
      <div>
        {{cshow}}
      </div>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: '.box',
        data: {
          datas: 'datas',
        },
        methods: {
          show() {
            console.log('方法')
          },
        },
        computed: {
          cshow() {
            console.log('属性')
            return
          },
        },
      })
    </script>
  </body>
</html>
